<template>
  <div class="search-box">
    <div class="row">
      <div class="left">
        <el-icon><Search /></el-icon>
        <span>筛选搜索</span>
      </div>
      <div class="right">
        <el-button>重置</el-button>
        <el-button type="primary" @click="searchHandle">查询搜索</el-button>
      </div>
    </div>
    <div class="row">
      <span>账号/姓名:</span>
      <el-input
        v-model="form.keyword"
        placeholder="请输入姓名、账号搜索"
      ></el-input>
    </div>
  </div>
  <el-table :data="list">
    <el-table-column prop="name" label="产品名称" />
    <el-table-column prop="description" label="产品介绍" />
  </el-table>
  <el-pagination
    v-model:current-page="pageNum"
    v-model:page-size="pageSize"
    :page-sizes="[10, 20, 50, 100]"
    background
    layout="total, sizes, prev, pager, next, jumper"
    :total="total"
    @size-change="pageChangeHandle"
    @current-change="pageSizeChangeHandle"
  />
</template>
<script setup lang="ts">
import { reactive } from "vue";
import useTable from "@/hooks/useTable";
import { getProductListApi } from "./api";

const form = reactive({
  keyword: "",
});

const {
  list,
  pageNum,
  pageSize,
  total,
  pageChangeHandle,
  pageSizeChangeHandle,
  searchHandle,
} = useTable(getProductListApi, form);
</script>
<style lang="less" scoped></style>
